<template>
    <div class="chipher">
        <my-layout>
            <!-- 插入主内容区的内容 -->
            <template v-slot:main>
                <div class="detail_container">
                    <!--   飞书文档待优化 -->
                    <div class="block docx-heading2-block" data-record-id="IRLwdam7DoGqYzxNveZcvlM0nqd">
                        <div class="heading-block">
                            <h2>Cipher：</h2>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="WLjqdRiCSo1CKQxI21GcsphFnQe">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <span class="title_txt">Source:</span>
                                <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                   href="https://arxiv.org/abs/2308.06463" target="_blank"
                                ><span>GPT-4 Is Too Smart To Be Safe: Stealthy Chat with LLMs via Cipher</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="HoI8d6zLCoyHfYx1B4ecYyGQndf">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <span class="title_txt">Github repo:</span>
                                <a style="cursor:pointer;text-decoration-skip:none;" class="link"
                                   href="https://github.com/RobustNLP/CipherChat" target="_blank"
                                ><span>https://github.com/RobustNLP/CipherChat</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="block docx-text-block"  data-record-id="AbNCdFgj4oIM9WxLsOOcLMBZnAc">
                        <div class="text-block">
                            <h4>Introduction:</h4>
                        </div>
                    </div>

                    <div class="block docx-text-block" data-record-id="MW6fdnqchooztmxdBlCc1O10nxc">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>CipherChat utilizes carefully designed system prompts to convert inputs into
                                    corresponding ciphers and attach them to the inputs before feeding them into LLMs for evaluation.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-image-block" data-record-id="KYq3dg1eXoo74AxlnQvc2FOTnTe">
                        <div class="img" image-token="Kv8ObEAlyoP8Uxx66JGcH0AUnYg">
                            <img draggable="false" src="@/assets/doc/img3.jpg"/>
                        </div>
                    </div>

                    <div class="block docx-text-block" data-record-id="CaAKdAYZJotHf2xS1uCcDA3rnje">
                        <div class="text-block">
                            <h4>Adjustable parameters:</h4>
                        </div>
                    </div>

                    <div class="block docx-text-block" data-record-id="J9jzdC1IxoijIexv4lOcwV2An9f">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_max_n_tokens(Int): Maximum number of tokens generated by the target model.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="GIxcdxVlPoVUEMxrFAQcdUhJn2d">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_temperature(float): The temperature during target model generations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="E2BBd7VoEo7ikwxd0sCcGYuWnfe">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>target_top_p(float): The value of top_p during target model generations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="TNxTdSwefoIX4Dx1BoVcfEp1n8g">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>eval_max_n_tokens(Int): Maximum number of tokens generated by the eval model.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="KsYTdrQbyoKdMfx6SRMc2kJGnTb">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>eval_temperature(float): The temperature during eval model generations.</p>
                            </div>
                        </div>
                    </div>
                    <div class="block docx-text-block" data-record-id="A3ThdMRiLou8PTxrcTdc4JvZnYf">
                        <div class="text-block-wrapper">
                            <div class="text-block">
                                <p>query_class(str): This parameter is not used for attack class,
                                    but is passed in when manually constructing datasets using the Instance class.
                                    It serves to define the type of question, thus allowing for the custom construction of prompts
                                    (choices include illegal, ethics, opinion, insult, mental, physical, privacy, exposure, role, unfairness, unsafe).
                                    If not specified, a generic prompt is used by default.</p>
                            </div>
                        </div>
                    </div>
                    <!--   飞书文档待优化 -->

                    <div class="effect">
                        <h4>Jailbreak prompt examples</h4>
                        <div class="exampleSelectorContainer">
                            <span>Select an Example：</span>
                            <el-select clearable v-model="fnName" placeholder="Please click to select"  @change="fetchMessage">
                                <el-option
                                        v-for="(value, name) in testData"
                                        :key="name"
                                        :label="name"
                                        :value="name">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="chatbot">
                            <section class="chatbot1">
                                <div class="chatbotHeader">
                                    <img src="@/assets/ChatGPT_logo.png" alt="ChatGPT Icon">
                                    <span>ChatGPT</span>
                                </div>
                                <div class="output-container">
                                    <div  v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.leftContent}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section>
                                <div class="chatbotHeader">
                                    <img src="@/assets/devil.png" alt="devil Icon">
                                    <span>Jailbreak result</span>
                                </div>
                                <div class="output-container">
                                    <div v-show="!!fnName">
                                        <div class="userMessage">
                                            <span class="who">User: </span>
                                            {{showMsg.title}}
                                        </div>
                                        <div class="assistantMessage">
                                            <span class="who">Assistant: </span>
                                            {{showMsg.content}}}
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </template>
        </my-layout>
    </div>
</template>

<script>
  import MyLayout from '@/views/MyLayout.vue'
  const initVale = {content:'',title:'',leftContent:''};
  export default {
    components: {
      MyLayout
    },
    data() {
      return {
        fnName:'',
        testData:{},
        showMsg:{...initVale},
        intervalId: null,
        meIntervalId: null,
      };
    },
    methods:{
      fetchMessage(val) {
        if(this.intervalId) {clearInterval(this.intervalId);}
        if(this.meIntervalId) {clearInterval(this.meIntervalId);}
        this.showMsg = {...initVale};
        if (val) {
          const content = this.testData[val];
          const leftContent = `I'm sorry, but I cannot assist with creating a phishing email or any other unethical activities.
                                        My purpose is to provide helpful and responsible information to users.
                                        If you have any other non-harmful requests or questions, feel free to ask,
                                        and I'll be happy to assist you.`;
          this.showMsg.title = val;
          let i = 0 , j = 0;
          this.meIntervalId = setInterval(() => {
            if (i < content.length) {
              this.showMsg.content += content.charAt(i);
              i++;
            } else {
              clearInterval(this.meIntervalId);
            }
          }, 10);
          this.intervalId = setInterval(() => {
            if (j < leftContent.length) {
              this.showMsg.leftContent += leftContent.charAt(j);
              j++;
            } else {
              clearInterval(this.intervalId);
            }
          }, 10);
        }
      }
    },
    created() {
      fetch(window.location.protocol + '//' + window.location.host+'/Cipher.jsonl')
        .then(response => response.text())
        .then(content => {
          // 处理 content 中的 JSON Lines 数据
          let linesArray = content.split(/\n|\r\n/);
          linesArray = linesArray.filter(item => item);
          // const obj = linesArray[0];  // 字符串
          // 逐行解析每个 JSON 对象
          const jsonArray = linesArray.map(line => {
            const obj = new Function(`return ${line}`)()
            return obj;
          });
          const testData = {};
          // 每一个行的结构obj是：{"jailbreak_prompt": xxx,"target_responses":[xxxx],"query":xxxx,"eval_results":[xxxxx]}
          for(let item of jsonArray){
            testData[item.query] = Array.isArray(item.target_responses) ? item.target_responses[0] : '';
          }
          this.testData = testData;
        })
        .catch(error => console.error(error));
    },
    beforeDestroy() {
      clearInterval(this.intervalId);
      clearInterval(this.meIntervalId);
    }
  };
</script>

<style lang="scss" scoped>

</style>
